import {Button, message} from "antd";
import {useEffect, useState} from "react";
import TopicAdd from "./topicAdd";

const TopicOperate = (props) => {

    // 日志
    const [messageApi, contextHolder] = message.useMessage();
    // 新增topic对话框
    const [topicAddModalVisible, setTopicAddModalVisible] = useState(false);

    /**
     * 监听页码的变化， 页码改变时立刻重新分页查询
     */
    useEffect(() => {
        props.pageQueryTopic(); // 当pageQueryParam变化时重新请求数据
    }, [props.pageQueryParam.pageNum]); // 监听pageQueryParam的变化

    /**
     * 清空查询条件
     */
    const cleanQueryParam = () => {
        props.setPageQueryParam({
            topicName: '',
            topicDescription: '',
            pageNum: 1,
            pageSize: 10
        })
    }

    return (
        <div>
            {contextHolder}

            <div style={{display: 'flex', flexWrap: 'wrap'}}>
                <div style={{display: 'flex', marginRight: 'auto', margin: '10px'}}>
                    <Button
                        style={{backgroundColor: '#009900', color: 'white'}}
                        onClick={() => setTopicAddModalVisible(true)}
                    >
                        新增主题
                    </Button>
                </div>

                <div style={{display: 'flex', marginLeft: '30px', margin: '10px'}}>
                    <div style={{display: 'flex'}}>
                        <Button
                            onClick={() => {
                                if (props.pageQueryParam.pageNum <= 1) {
                                    messageApi.error('已经是第一页了');
                                } else {
                                    props.setPageQueryParam({
                                        ...props.pageQueryParam,
                                        pageNum: props.pageQueryParam.pageNum - 1
                                    })
                                }
                            }}
                        >
                            上一页
                        </Button>
                        <div style={{display: 'flex', alignItems: 'center', fontSize: '15px', margin: '0 10px'}}>
                            <span>共</span>
                            <span style={{
                                margin: '0 5px',
                                fontWeight: 'bolder',
                                color: 'red'
                            }}>{props.queryTopicInfo.total}</span>
                            <span>条数据，当前为第</span>
                            <span style={{
                                margin: '0 5px',
                                fontWeight: 'bolder',
                                color: 'red'
                            }}>{props.pageQueryParam.pageNum}</span>
                            <span>页</span>
                        </div>
                        <Button
                            onClick={() => {
                                if (props.pageQueryParam.pageNum >= props.queryTopicInfo.total / props.pageQueryParam.pageSize) {
                                    messageApi.error('已经是最后一页了');
                                } else {
                                    props.setPageQueryParam({
                                        ...props.pageQueryParam,
                                        pageNum: props.pageQueryParam.pageNum + 1
                                    })
                                }
                            }}
                        >
                            下一页
                        </Button>
                    </div>

                    <div>
                        <Button
                            style={{marginLeft: '10px'}}
                            type={'primary'}
                            onClick={() => props.pageQueryTopic()}
                        >
                            查询
                        </Button>
                        <Button
                            style={{marginLeft: '10px'}}
                            onClick={() => cleanQueryParam()}
                        >
                            清空条件
                        </Button>
                    </div>
                </div>
            </div>

            {/* 新增topic对话框 */}
            <TopicAdd
                pageQueryTopic={props.pageQueryTopic}
                topicAddModalVisible={topicAddModalVisible}
                setTopicAddModalVisible={setTopicAddModalVisible}
            />
        </div>
    )
}
export default TopicOperate;